<template>
  <div class="orderManage h100" v-loading="loading">
    <div class="pageContent">
       
      <el-row :gutter="11" class="fileSearch">
         <el-form
      :model="ruleForm"
      :inline="true"
      ref="ruleForm"
      label-width="80px"
    >
        <el-form-item label="姓名:" prop="fullName">
          <el-input v-model="ruleForm.fullName" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            type="primary"
            @click="onSubmit()"
          >
            查询
          </el-button>
          <el-button
            icon="el-icon-refresh"
            @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
        </el-form>
      </el-row>
      <el-table
        :data="tableData"
        border
        :header-cell-style="{
          background: 'rgb(246,247,251)',
          color: '#606266',
        }"
        stripe
        class="defaultTableHeight"
      >
        <el-table-column type="index" label="编号" width="50">
        </el-table-column>
        <el-table-column prop="gmtCreate" align="center" label="注册日期">
        </el-table-column>
        <el-table-column prop="fullName" align="center" label="姓名">
        </el-table-column>
        <el-table-column prop="loginPhone" align="center" label="手机号">
        </el-table-column>
        <el-table-column prop="asLogin" align="center" label="禁用启用">
          <template slot-scope="scope">
            <el-button
              :type="scope.row.asLogin === 0 ? 'danger' : 'success'"
              size="mini"
              >{{ scope.row.asLogin === 0 ? "禁用" : "启用" }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="300px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <p style="text-align: right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pager.currentPage"
          :page-size="pager.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          background
          layout="total,sizes,prev, pager, next, jumper"
          :total="pager.total"
        >
        </el-pagination>
      </p>
        
    </div>

  </div>
</template>

<script>
import * as appUser from '@/api/appUser'
export default {
    name:'orderManage',
    data() {
        return {
            loading: false,
            ruleForm: {
                fullName: "",
            },
            pager: {
                pageSize: 20,
                total: 1,
                currentPage: 1
            },
            tableData: [],
            
        }
    },
    mounted(){
      //this.onSubmit();
    },
    //注销window.onresize事件
    destroyed() {
      
    },
    methods: {
        onSubmit() {
            this.loading = true
            let postData = {
            "loginPhone": this.ruleForm.loginPhone,
            "fullName": this.ruleForm.fullName,
            "auditState": this.ruleForm.auditState,
            "pageSize": this.pager.pageSize,
            "currentPage": this.pager.currentPage,
            "orderField	": "",     //排序字段
            "orderType": ""        //排序顺序
            }
            //查询接口
            //console.log(postData)
            appUser['getUserRecord'](postData).then(response => {
            // console.log(response)
            const {data} = response;
            if (!data) {
                this.loading = false;
                this.$message('数据读取失败')
                return
            }
            this.tableData = data.list;
            data.pager.pageSize = this.pager.pageSize;
            this.pager = data.pager
            this.loading = false
            //数据读取成功
            }).catch(error => {
            this.$message(error)
            this.loading = false
            this.tableData = []
            })
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.$refs["ruleForm"].resetFields();
            this.onSubmit();
        },
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
            this.pager.pageSize = size;
            this.onSubmit()
        },
        handleCurrentChange: function (currentPage) {
            this.pager.currentPage = currentPage;
            this.onSubmit()  //点击第几页
        },

    }
};
</script>

<style lang="scss" scoped>

</style>